<template>
  <view class="wrapper">
    <BMap ref="mapRef"/>
    <BSseMessage @receiveMsg="handleReceiveMsg"/>
    <view class="operation">
      <template v-if="orderDetail.orderStatus >= ORDER_STATUS.tripFinish ">
        <view v-if="orderDetail.orderStatus === ORDER_STATUS.tripFinish" class="desc">行程已完成，请等待司机收款</view>
        <view v-if="orderDetail.orderStatus === ORDER_STATUS.awaitPay">
          <text class="desc">您的行程已结束，请您尽快完成支付</text>
          <button class="btn" @click="handlePay">￥{{ orderDetail.price }}立即支付</button>
        </view>
      </template>
      <template v-else>
        <view v-if="orderDetail.orderStatus === ORDER_STATUS.orderStart" class="desc">等待附近司机接单中...</view>
        <view class="desc">
          <text>{{ orderDetail.vehicleNo }}</text>
          <text v-if="orderDetail.orderStatus === ORDER_STATUS.driverReceive">已接单</text>
          <text v-if="orderDetail.orderStatus === ORDER_STATUS.driverToPickUp">正在赶来的路上</text>
          <text v-if="orderDetail.orderStatus === ORDER_STATUS.driverArriveStartPoint">到达上车点</text>
          <text v-if="orderDetail.orderStatus === ORDER_STATUS.tripStart">正在为您服务</text>
        </view>
        <button class="btn btn_cancel" @click="handleCancel">取消订单</button>
      </template>
    </view>
  </view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ApiGetCurrentOrder, ApiPostOrderCancel } from "../api/order"
import { HandleApiError } from "../utils"
import { ORDER_STATUS } from '../config/dicts'
import BSseMessage from '../component/BSseMessage.vue'
import BMap from '../component/BMap.vue'
import { onMounted, ref } from "vue"

let $routerQuery = {}
let orderDetail = ref({})
let mapRef = ref(null)

onLoad((option) => {
  $routerQuery = option
})
onMounted(() => {
  getOrderDetail()
})
const getOrderDetail = async () => {
  const { error, result } = await ApiGetCurrentOrder()
  if (!result) {
    uni.navigateTo({ url: '/pages/index/index' })
  } else {
    orderDetail.value = result
    mapRef.value.driving([result.depLongitude, result.depLatitude], [result.destLongitude, result.destLatitude])
  }
}
/**
 * @Description: 取消订单
 * @return {*}
 */
const handleCancel = async () => {
  const { error, result } = await ApiPostOrderCancel({ orderId: orderDetail.value.id })
  if (!HandleApiError(error)) {
    uni.redirectTo({ url: '/pages/index/index' })
  }
}
/**
 * @Description: 点击支付，跳转到支付网页；
 * @return {*}
 */
const handlePay = () => {
  uni.navigateTo({
    url: `/pages/pay?id=${orderDetail.value.id}&price=${orderDetail.value.price}`
  })
}
/**
 * @Description: 接收订单变更消息
 * 暂时只有订单收款时会通知，使用价格判断
 * 比较完善的消息通知应该有消息分类，每个节点变化都通知
 * @param {*} msg
 * @return {*}
 */
const handleReceiveMsg = (msg) => {

  if (msg.price) {
    orderDetail.value.price = msg.price
    orderDetail.value.orderStatus = ORDER_STATUS.awaitPay
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 30px);
  width: 100%;
}

.operation {
  background: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  bottom: 30rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  left: 30rpx;
  padding: $uni-spacing-max;
  position: fixed;
  right: 30rpx;
  z-index: 9;
}

.desc {
  color: $uni-text-color;
  display: flex;
  font-size: $uni-font-size-base;
  height: 60rpx;
  justify-content: space-between;

}

.btn {
  background: $uni-color-primary;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  margin-top: $uni-spacing-max;

  &__cancel {
    background: $uni-bg-color-grey;
    border: 1px solid $uni-border-color;
    color: $uni-text-color;
  }

  &::after {
    display: none;
  }
}
</style>
